<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"

// const route = useRoute()
// const router = useRouter()
const radio1 = ref("否")
const ruleForm = reactive({
  name: "",
  sum: 20
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <!-- <h2>领料单</h2> -->
      <el-form :model="ruleForm" :rules="rules" inline label-width="auto" status-icon style="max-width: 920px" class="m-auto pt-8">
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">物资部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <!-- <el-form-item label="收货地点" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
          小长兴
        </el-form-item> -->
        <el-divider />
        <div class="pb-3 text-right">
          <el-button type="primary">批量添加库位</el-button>
          <el-button icon="CirclePlus" type="primary">加工号</el-button>
          <el-button icon="CirclePlus" type="primary">加产品</el-button>
        </div>
        <el-form-item label="产品工号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="机号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="物料名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="图号" >
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="件号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="材质">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="批次">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="库位" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="数量" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="reqe">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            v-model="ruleForm.name"
            style="width: 470px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-divider />

        <!-- <el-form-item label="是否加急" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="是" value="1" />
              <el-radio-button label="否" value="2" />
            </el-radio-group>
          </div>
        </el-form-item> -->
        <el-form-item label="入库人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="复核人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br>
        <el-form-item label="上传照片" prop="req">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            style="width: 178px"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <div class="text-right py-5">
          <el-button>存为草稿</el-button>
          <el-button type="primary">下单</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>